<template>
	<div class="app-container">
		<div class="wx-user-box" style="padding-top: 0;">
			<div class="wx-user-title">webrtc列表</div>
			<div class="search-box">
				<!-- 查询 -->
				<el-form :inline="true" :model="formInline" class="demo-form-inline" @submit.native.prevent>
					<el-form-item label="设备ID">
						<el-input @change="search" clearable v-model="formInline.device_id" placeholder="请输入"
							style="width: 200px;"></el-input>
					</el-form-item>
					<el-form-item label="设备类型">
						<el-select v-model="formInline.device_type" placeholder="请选择" clearable @change="search">
							<el-option label="室内机" :value="1"></el-option>
							<!-- <el-option label="门口机" :value="2"></el-option> -->
							<el-option label="物业机" :value="3"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="小区选择">
						<el-select v-model="formInline.xiaoqu_id" filterable placeholder="请选择" clearable
							@change="search">
							<el-option :label="item.xq_name" :value="item.id" v-for="(item, index) in xiaoqus"
								:key="index">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="search" icon="el-icon-search">查询</el-button>
						<el-button type="success" @click="openAdd()" icon="el-icon-circle-plus-outline">添加设备</el-button>
					</el-form-item>
				</el-form>

				<el-table :data="list" style="width: 100%;">
					<el-table-column label="设备ID" prop="device_id"></el-table-column>
					<el-table-column label="设备名称" prop="device_name"></el-table-column>
					<el-table-column label="设备类型">
						<template slot-scope="scope">
							{{types[scope.row.device_type]}}
						</template>
					</el-table-column>
					<el-table-column label="所属小区" prop="use_xiaoqu_name"></el-table-column>
					<el-table-column label="所属门口机" prop="belong_door"></el-table-column>
					<!-- <el-table-column label="所属物业机" prop="belong_property"></el-table-column> -->
					<el-table-column label="imID" prop="im_id"></el-table-column>
					<el-table-column label="im绑定">
						<template slot-scope="scope">
							<el-tag size="mini" type="success" v-if="scope.row.im_id">已绑定</el-tag>
							<el-tag size="mini" type="info" v-else>未绑定</el-tag>
						</template>
					</el-table-column>
					<el-table-column prop="create_time" label="创建时间" />
					<el-table-column label="操作" fixed="right" width="160">
						<template slot-scope="scope">
							<el-button size="mini" @click="setItem(scope.row)">编辑</el-button>
							<el-button size="mini" type="danger" @click="del(scope.row.webrtc_id)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>

				<div class="page-block" style="margin-top: 20px;">
					<el-pagination background :current-page="currentPage" :page-sizes="pageSizes" :page-size="pageSize"
						layout="total, sizes, prev, pager, next, jumper" :total="totalRow" :pager-count="pageCount"
						@size-change="handleSizeChange" @current-change="handleCurrentChange" />
				</div>

			</div>
		</div>

		<el-dialog :title="isEdit ? '编辑设备':'添加设备'" :visible.sync="dialogVisible" width="600px" @close="reset('form')">
			<el-form ref="form" :rules="rules" :model="form" label-width="120px">
				<el-form-item label="im绑定" v-if="isEdit">
					<el-switch v-model="form.imFlag" :active-value="2" :inactive-value="1"
						active-color="#13ce66" inactive-color="#ff4949" active-text="是" inactive-text="否">
					</el-switch>
				</el-form-item>
				<el-form-item label="已绑im_id" v-if="form.imFlag==2&&form.im_id">
					<el-input disabled style="width:220px;" v-model="form.im_id"></el-input>
				</el-form-item>
				<el-form-item :label="'im'+(form.im_id?'切换':'选择')" prop="newImId" v-if="isEdit&&form.imFlag==2">
					<el-select v-model="form.newImId" filterable placeholder="请选择">
						<el-option :label="item.im_id" :value="item.im_id" v-for="(item, index) in imList"
							:key="index">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="设备类型" prop="device_type">
					<el-radio-group :disabled="isEdit?true:false" v-model="form.device_type" @change="deviceType">
						<el-radio :label="1">室内机</el-radio>
						<!-- <el-radio :label="2">门口机</el-radio> -->
						<el-radio :label="3">物业机</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="设备ID" prop="device_id">
					<el-input :disabled="isEdit?true:false" style="width:220px;" v-model="form.device_id"
						placeholder="请输入设备ID"></el-input>
				</el-form-item>
				<el-form-item label="设备名称" prop="device_name">
					<el-input style="width:220px;" v-model="form.device_name" clearable
						placeholder="请输入设备名称"></el-input>
				</el-form-item>
				<el-form-item label="小区选择" prop="xiaoqu_id">
					<el-select v-model="form.xiaoqu_id" filterable placeholder="请选择"
						clearable @change="changXiaoqu">
						<el-option :label="item.xq_name" :value="item.id" v-for="(item, index) in xiaoqus" :key="index">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="房源选择" prop="house_id" v-if="form.device_type==1">
					<div>
						<el-input style="display: none;" v-model="form.house_id"></el-input>
						<el-button type="primary" size="mini" @click="toHouse">去选择</el-button>
						<div v-if="address">已选：{{address}}</div>
					</div>
				</el-form-item>
				<el-form-item label="登陆账号" prop="login_name">
					<el-input style="width:220px;" v-model="form.login_name" clearable
						placeholder="请输入账号"></el-input>
				</el-form-item>
				<el-form-item label="登陆密码" prop="login_password">
					<el-input  style="width:220px;" v-model="form.login_password" clearable
						placeholder="请输入密码"></el-input>
				</el-form-item>
				<!-- <el-form-item label="所属门口机" prop="belong_door" v-if="form.device_type==1">
					<el-input style="width:220px;" v-model="form.belong_door"
						placeholder="请输入门口机ID"></el-input>
				</el-form-item>
				<el-form-item label="所属物业机" prop="belong_property" v-if="form.device_type==1||form.device_type==2">
					<el-select v-model="form.belong_property" filterable placeholder="请选择" clearable>
						<el-option :label="item.device_id" :value="item.device_id" v-for="(item, index) in selList" :key="index"></el-option>
					</el-select>
				</el-form-item> -->
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="reset('form')">取 消</el-button>
				<el-button type="primary" @click="save('form')">确 定</el-button>
			</span>
		</el-dialog>
		
		<!-- 选择房号 -->
		<sel-house v-if="dialogVisible2" :wyId="form.xiaoqu_id+''"></sel-house>
		
	</div>
</template>
<script>
	import Api from '@/api/pages/entrance-guard/index.js';
	import fyApi from '@/api/pages/wuye/fy.js';
	import selHouse from './components/sel-house.vue'
	export default {
		name: 'webrtc-list',
		components: {
			selHouse
		},
		data() {
			return {
				dialogVisible: false,
				dialogVisible2: false,
				pageSize: 10, // 每页条数
				pageCount: 7, //
				pageSizes: [10, 20, 30, 50], // 个数选择器
				page: 1,
				size: 10,
				currentPage: 1,
				totalRow: 0,
				formInline: {
					device_id: '',
					device_type: '',
					xiaoqu_id: ''
				},
				list: [],
				form: {},
				xiaoqus: [],
				houses: [],
				imList: [],
				selList:[],
				types: {
					1: '室内机',
					2: '门口机',
					3: '物业机'
				},
				isEdit: false,
				address:'',
				rules: {
					device_id: [{
						required: true,
						message: '请输入设备ID',
						trigger: 'change'
					}],
					device_name: [{
						required: true,
						message: '请输入设备名称',
						trigger: 'change'
					}],
					xiaoqu_id: [{
						required: true,
						message: '请选择小区',
						trigger: 'change'
					}],
					newImId: [{
						required: true,
						message: '请选择im',
						trigger: 'change'
					}],
					house_id: [{
						required: true,
						message: '请选择房源',
						trigger: 'change'
					}],
					login_name: [{
						required: true,
						message: '请输入登陆账号',
						trigger: 'change'
					}],
					login_password: [{
						required: true,
						message: '请输入登陆密码',
						trigger: 'change'
					}],
					// belong_property: [{
					// 	required: true,
					// 	message: '请选择物业机ID',
					// 	trigger: 'change'
					// }],
					// belong_door: [{
					// 	required: true,
					// 	message: '请输入门口机ID',
					// 	trigger: 'change'
					// }],
				},
			};
		},
		mounted() {
			this.getData();
			this.getLoadXiaoQuList();
		},
		watch:{
			'form.xiaoqu_id':function(newValue,oldValue){
				if(newValue){
					if(this.form.device_type==1&&!this.isEdit){
						this.getSelectList();
						this.form.belong_property = '';
						this.selList = [];
					}
					if(this.form.device_type==1&&this.isEdit){
						this.houses = [];
						this.getLoadHouse();
					}
				}else{
					this.form.belong_property = '';
					this.selList = [];
				}
			}
		},
		methods: {
			search() {
				this.page = 1;
				this.getData();
			},
			handleSizeChange(val) {
				this.size = val;
				this.page = 1;
				this.getData();
			},
			handleCurrentChange(val) {
				this.page = val;
				this.getData();
			},
			
			// 获取下拉物业机
			getSelectList(){
				let data = {
					pageNumber: 1,
					pageSize: 999,
					device_type: 3,
					xiaoqu_id: this.form.xiaoqu_id
				};
				Api.webrtcQuery(data,false).then(res => {
					if (res.state) {
						this.selList = res.data.list;
					}
				});
			},

			// 获取im列表
			getImList() {
				Api.imQuery({
					is_use: 0,
					pageNumber: 1,
					pageSize: 9999
				}, false).then(res => {
					if (res.state) {
						this.imList = res.data.list;
					} else {
						this.$message.error(res.msg);
					}
				});
			},

			// 获取列表
			getData() {
				let data = {
					pageNumber: this.page,
					pageSize: this.size,
					device_id: this.formInline.device_id,
					device_type: this.formInline.device_type,
					xiaoqu_id: this.formInline.xiaoqu_id
				};
				Api.webrtcQuery(data).then(res => {
					if (res.state) {
						this.list = res.data.list;
						this.totalRow = res.data.totalRow;
					} else {
						this.$message.error(res.msg);
					}
				});
			},
			// 设备类型
			deviceType(e) {
				this.form.belong_door = '';
				this.form.belong_property = '';
				this.form.house_id = '';
				this.form.house_no_name = '';
				this.form.house_org_id = '';
				if(e==1){
					this.getSelectList();
					this.selList = [];
				}
				// console.log(e)
			},
			
			// 小区选择
			changXiaoqu(e) {
				this.form.house_id = '';
				this.form.house_no_name = '';
				this.form.house_org_id = '';
				this.address = '';
				// console.log(e)
			},
			
			// 选择房源
			toHouse(){
				if(!this.form.xiaoqu_id){
					this.$message.error('请先选择小区');
					return
				}
				this.dialogVisible2 = true;
			},
			// 房源选中回调
			colSelHouse(data){
				this.dialogVisible2 = false;
				if(data){
					this.address = data.address;
					this.form.house_id = data.id;
					this.form.house_no_name = data.room_number;
					this.form.house_org_id = data.org_id;
				}
				// console.log(data)
			},

			//小区获取
			getLoadXiaoQuList() {
				Api.loadAllXiaoQu().then(res => {
					if (res.state) {
						this.xiaoqus = res.data;
					}
				})
			},
			
			// 房源
			getLoadHouse() {
				fyApi.query({
					xiaoqu_id: this.form.xiaoqu_id,
					org_id: this.form.house_org_id,
					room_number: this.form.house_no_name,
					pageNumber: 1,
					pageSize: 100
				},false).then(res => {
					if (res.state) {
						this.houses = res.data.list;
						this.houses.forEach(d=>{
							if(d.id==this.form.house_id){
								this.address = d.address;
							}
						})
					} else {
						this.$message(res.msg);
					}
				});
			},

			// 初始化数据
			initData() {
				this.form = {
					im_id: '',
					device_id: '',
					device_name: '',
					device_type: 1, //1室内机，2门口机，3物业机
					login_name: '', //用户账户
					login_password: '', //密码
					xiaoqu_id: '', //小区id
					house_id: '', //房源id
					house_no_name: '', //房间号
					house_org_id: '', //房源组织id
					belong_property: '', //所属物业机
					belong_door: '', //所属门口机
				};
			},

			// 删除
			del(id) {
				this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					Api.delDeviceWebrtc({
						webrtcId: id
					}).then(res => {
						if (res.state) {
							this.$message({
								message: res.msg,
								type: "success"
							});
							this.getData();
						} else {
							this.$message.error(res.msg);
						}
					});
				}).catch(() => {});
			},

			// 编辑
			setItem(item) {
				this.form = {
					webrtc_id: item.webrtc_id,
					im_id: item.im_id,
					imFlag: item.im_id ? 2 : 1, //1取消，2切换
					newImId: '', //新的im_id
					device_id: item.device_id,
					device_name: item.device_name,
					device_type: item.device_type,
					login_name: item.login_name,
					login_password: item.login_password,
					xiaoqu_id: item.xiaoqu_id,
					house_id: item.house_id,
					house_no_name: item.house_no_name,
					house_org_id: item.house_org_id,
					belong_property: item.belong_property,
					belong_door: item.belong_door,
				};
				this.isEdit = true;
				this.dialogVisible = true;
				this.getImList();
				// console.log(this.form)
			},
			// 添加
			openAdd() {
				this.initData();
				this.isEdit = false;
				this.dialogVisible = true;
			},
			// 重置
			reset(formName) {
				this.$refs[formName].resetFields();
				this.dialogVisible = false;
				this.initData();
				this.address = '';
			},

			// 保存
			save(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						let params = JSON.stringify(this.form);
						params = JSON.parse(params);
						let datas = {};
						for (let item in params) {
							if (['imFlag','newImId'].includes(item)) {
								datas['imFlag'] = params.imFlag;
								if (params.imFlag == 2) {
									datas['newImId'] = params.newImId
								}
							} else {
								datas['accessDeviceWebrtc.' + item] = params[item];
							}
						}
						// console.log(datas)
						// return
						if (this.isEdit) {
							Api.updateDeviceWebrtc(datas).then(res => {
								if (res.state) {
									this.$message({
										message: '操作成功',
										type: "success"
									});
									this.reset('form');
									this.getData();
								} else {
									this.$message.error(res.msg);
								}
							});
						} else {
							Api.webrtcSave(datas).then(res => {
								if (res.state) {
									this.$message({
										message: '添加成功',
										type: "success"
									});
									this.reset('form');
									this.getData();
								} else {
									this.$message.error(res.msg);
								}
							});
						}

					}
				});
			}

		}
	};
</script>
<style lang="scss" scoped>

</style>
